var data = [
  {
    id: 1,
    name: '维修手册1',
    num: 1,
    updateTime: '2022-8-1'
  },
  {
    id: 2,
    name: '维修手册2',
    num: 2,
    updateTime: '2022/8/2'
  },
  {
    id: 3,
    name: '维修手册3',
    num: 3,
    updateTime: '2022/8/3'
  },
  {
    id: 4,
    name: '维修手册4',
    num: 4,
    updateTime: '2022/8/4'
  },
  {
    id: 5,
    name: '维修手册5',
    num: 5,
    updateTime: '2022/8/5'
  },
  {
    id: 6,
    name: '维修手册5',
    num: 5,
    updateTime: '2022/8/6'
  },
  {
    id: 7,
    name: '维修手册7',
    num: 5,
    updateTime: '2022/8/25'
  },
  {
    id: 8,
    name: '维修手册8',
    num: 8,
    updateTime: '2022/8/8'
  },
  {
    id: 9,
    name: '维修手册9',
    num: 9,
    updateTime: '2022/8/10'
  },
  {
    id: 10,
    name: '维修手册10',
    num: 10,
    updateTime: '2022/8/10'
  },
  {
    id: 11,
    name: '维修手册10',
    num: 10,
    updateTime: '2022/8/10'
  }
]

var currentPage = 1
var pageNum = Math.ceil(data.length / 10)
var tbody = document.querySelector('tbody')
var pagination = document.querySelector('.pagination')
var paginationRight = document.querySelector('#paginationRight')
function render() {
  var searchData = []
  var renderData = []
  tbody.innerHTML = ''
  //筛选数据
  //关键词
  var searchName = document.querySelector('.searchName').value
  searchData = data
  if (searchName.trim()) {
    searchData = data.filter(function (v) {
      return v.name.includes(searchName)
    })
  }

  //数量
  var searchNum = document.querySelector('.searchNum').value
  if (searchNum.trim()) {
    searchData = searchData.filter(function (v) {
      return v.num == searchNum
    })
  }
  //时间
  var startTime = document.querySelector('.startTime').value
    ? new Date(
        document.querySelector('.startTime').value.replace(/-/g, '/')
      ).getTime()
    : new Date('1970/1/1').getTime()
  var endTime = document.querySelector('.endTime').value
    ? new Date(document.querySelector('.endTime').value).getTime()
    : new Date().getTime()
  if (startTime > endTime) {
    alert('起始时间不能晚于截止时间！')
    return
  }
  searchData = searchData.filter(function (v) {
    var time = new Date(v.updateTime).getTime()
    return time >= startTime && time <= endTime
  })
  pageNum = Math.ceil(searchData.length / 10)
  //渲染数据
  renderData = searchData.slice((currentPage - 1) * 10, currentPage * 10)
  for (var i = 0; i < renderData.length; i++) {
    var tr = document.createElement('tr')
    tr.innerHTML = `
      <td>${renderData[i].id}</td>
      <td>${renderData[i].name}</td>
      <td>${renderData[i].num}</td>
      <td>${renderData[i].updateTime}</td>
      <td>
        <button class="btn btn-primary editBtn">编辑</button>
        <button class="btn btn-danger delBtn">删除
        </button>
      </td>
          `
    tbody.appendChild(tr)
  }
  //渲染分页器
  var pageBtn = document.querySelectorAll('.pageBtn')
  if (pageBtn.length) {
    for (var i = 0; i < pageBtn.length; i++) {
      pagination.removeChild(pageBtn[i].parentNode)
    }
  }

  for (var i = 1; i <= pageNum; i++) {
    var li = document.createElement('li')
    li.innerHTML = `<a href="#" class="pageBtn">${i}</a>`
    pagination.insertBefore(li, paginationRight)
  }
  //当前页active
  document
    .querySelectorAll('.pageBtn')
    [currentPage - 1].parentNode.classList.add('active')
  //禁止左右按钮
  $('#paginationLeft').removeClass('disabled')
  $('#paginationRight').removeClass('disabled')
  if (currentPage == 1) {
    $('#paginationLeft').addClass('disabled')
  }
  if (currentPage == pageNum) {
    $('#paginationRight').addClass('disabled')
  }
}
render()
//改变页码
function changePage(e) {
  if (e.target.innerText == '«') {
    if (currentPage > 1) {
      currentPage--
      render()
    }
  } else if (e.target.innerText == '»') {
    if (currentPage < pageNum) {
      currentPage++
      render()
    }
  } else {
    currentPage = e.target.innerText
    render()
  }
}
pagination.addEventListener('click', changePage)
var searchBtn = document.querySelector('.searchBtn')
searchBtn.addEventListener('click', function () {
  currentPage = 1
  render()
})
//删除
function del(e) {
  if (e.target.classList.value.includes('delBtn')) {
    var tr = e.target.parentNode.parentNode
    tbody.removeChild(tr)
    var id = tr.children[0].innerText
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data.splice(i, 1)
      }
    }
    render()
  }
}
var table = document.querySelector('table')
table.addEventListener('click', del)
//编辑
function edit(e) {
  if (e.target.classList.value.includes('editBtn')) {
    var id = e.target.parentNode.parentNode.children[0].innerText
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        $('#editId').val(data[i].id)
        $('#editName').val(data[i].name)
        $('#editNum').val(data[i].num)
        $('#editUpdateTime').val(data[i].updateTime)
      }
    }
    $('#editModal').modal('show')
  }
}
table.addEventListener('click', edit)
//保存按钮
function editSave() {
  var id = $('#editId').val()
  for (var i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      data[i].id = $('#editId').val()
      data[i].name = $('#editName').val()
      data[i].num = $('#editNum').val()
      data[i].updateTime = new Date().toLocaleDateString()
    }
  }
  $('#editModal').modal('hide')
  render()
}
$('#editSave').on('click', editSave)
var addId = data.length + 1
//添加
function add() {
  $('#addModal').modal('show')
  $('#addName').val('')
  $('#addNum').val('')
  $('#addId').val(addId)
  $('#addUpdateTime').val(new Date().toLocaleDateString())
}
$('#addBtn').on('click', add)
//添加保存
function addSave() {
  data.push({
    id: addId,
    name: $('#addName').val(),
    num: $('#addNum').val(),
    updateTime: $('#addUpdateTime').val()
  })
  $('#addModal').modal('hide')
  render()
  addId++
}
$('#addSave').on('click', addSave)
